<template>
    <div class="release-frame" v-show="releaseShow" v-click-outside="clickOutside">
        <h3 class="title">发布文章</h3>

        <div class="block">
            <div class="min-title">分类<span class="verified-tips">{{ ategoryVerifiedTips }}</span></div>
            <div class="con" :class="ategoryVerifiedTips ? 'verified-style' : ''">
                <span @click="onCategoryFn(item.id)" v-for="(item, index) in categorys" :key="item.id" :class="item.id === selectCategoryId ? 'select-style' : ''">{{ item.name }}</span>
            </div>
        </div>

        <div class="block">
            <div class="min-title">标签<span class="verified-tips">{{tagVerifiedTips }}</span></div>
            <div class="con" :class="tagVerifiedTips ? 'verified-style' : ''">
                <span @click="onTagFn(index, item.id)" v-for="(item, index) in tags" :key="item.id" :class="item.select ? 'select-style' : ''">{{ item.name }}</span>
            </div>
        </div>

        <div class="block">
            <div class="min-title">类型</div>
            <div>
                <input type="radio" id="one" value="ORIGINAL" v-model="source">
                <label for="one">原创</label>
                <input type="radio" id="two" value="REPRINT" v-model="source">
                <label for="two">转载</label>
            </div>
            <input v-show="source === 'REPRINT'" type="text" v-model="reprint_link">
        </div>

        <div class="block">
            <div class="min-title">发布形式</div>
            <div>
                <input type="radio" id="aaa" value="OPEN" v-model="release_form">
                <label for="aaa">公开</label>
                <input type="radio" id="bbb" value="PRIVATE" v-model="release_form">
                <label for="bbb">私密</label>
            </div>
        </div>

        <div class="btn">
            <button  @click="onRelease">发布</button>
        </div>
    </div>
</template>

<script>
    import { writeSave } from '@/api/writeBlog'
    import { categoryList } from '@/api/category'
    import { tagList } from '@/api/tag'
    import Cache from '@/utils/cache/index'
    let cache = new Cache()

    export default {
        name: "index",
        props: {
            releaseShow: {
                type: Boolean,
                default: false,
            },
            textAreaValue: {
                type: String,
                default: '',
            },
            markdownTitle: {
                type: String,
                default: '',
            },

        },
        data () {
            return {
                categorys: [],
                // 选中分类id
                selectCategoryId: 0,
                // 选中标签id列表
                tags: [],
                selectTagsId: [],

                // 分类验证不通过的提示
                ategoryVerifiedTips: '',
                // 标签验证不通过提示
                tagVerifiedTips: '',

                // 文章类型
                source: 'ORIGINAL',
                // 转载连接
                reprint_link: '',
                // 发布形式
                release_form: 'OPEN',

            }
        },
        created () {
            this.getCategoryList()
            this.getTagList()
        },
        methods: {
            async getCategoryList () {
                let { result: categorys } = await categoryList()
                this.categorys = categorys
            },
            async getTagList () {
                let { result: tags } = await tagList()
                this.tags = tags
            },
            // 选中分类
            onCategoryFn (id) {
                // 关闭提示
                this.ategoryVerifiedTips = ''
                this.selectCategoryId = id
            },
            // 选中标签
            onTagFn (index, id) {
                let { tags, selectTagsId } = this
                let item = tags[index]
                item.select = !item.select ? true : false

                // 关闭提示
                this.tagVerifiedTips = ''

                // 选中的标签
                let selectTagsIdIndex = selectTagsId.indexOf(id)
                selectTagsIdIndex !== -1 ? selectTagsId.splice(selectTagsIdIndex, 1) : selectTagsId.push(id)

                // 页面添加高亮
                this.$set(this.tags, index, item)
            },
            // 发布文章
            async onRelease () {
                if (!this.verified()) return
                let { textAreaValue, markdownTitle, selectCategoryId, selectTagsId, source, reprint_link, release_form } = this
                console.log(111111111111)
                let { user_name: author } = cache.getCache('userInfo')


                let params = {
                    title: markdownTitle, // 标题（必须）
                    abstract: '', // 摘要（可选）
                    author, // 作者（必须）
                    source, // 文章来源【ORIGINAL原创】【REPRINT转载】（必须）
                    content: textAreaValue, // 文章内容 （必须）
                    cid: selectCategoryId, // 分类id （必须）
                    reprint_link, // 转载连接 （可选）
                    tag_id: selectTagsId, // 标签id （必须）
                    release_form, // 发布形式 [（]PRIVATE 私密][（]OPEN公开] （必须）
                }
                console.log(params)

                let res = await writeSave(params)
                console.log(res)
            },

            // 验证
            verified () {
                let { selectCategoryId, selectTagsId } = this
                if (!selectCategoryId) {
                    this.ategoryVerifiedTips = '请选择分类'
                    return false
                }
                if (selectTagsId.length === 0) {
                    this.tagVerifiedTips = '请选择标签'
                    return false
                }

                return true

            },

            // 除点击该元素外 触发事件
            clickOutside (e) {
                if (!this.releaseShow) return
                // 如果点击的元素有click-outside-cancel属性则 不执行
                if (e.target.hasAttribute('click-outside-cancel')) return

                this.$emit('update:releaseShow', false)
            },
        },
    }
</script>

<style scoped lang="scss">
    .release-frame {
        position: absolute;
        top: 0; right: 0;
        border: 1px solid;
        margin: 47px -45px;
        padding: 20px;
        box-sizing: border-box;
        width: 360px;
        min-height: 200px;
        background-color: #fff;
        text-align: left;

        .title {
            margin-bottom: 10px;
            font-weight: 700;
            color: rgba(119,127,141,.8);
        }

        .block {
            margin-bottom: 10px;
        }

        .min-title {
            margin-bottom: 10px;
            color: #909090;
            font-size: 16px;

            .verified-tips {
                margin-left: 10px;
                color: #f00;
                font-size: 12px;
                text-decoration: underline;
            }
        }

        .con {
            font-size: 14px;
            display: flex;
            flex-wrap: wrap;

            span {
                margin: 5px;
                padding: 2px 10px;
                border: 1px solid #999;
                color: #999;
            }

            span:hover {
                border: 1px solid #333;
                color: #000;
            }

            .select-style {
                border: 1px solid #333;
                color: #000;
            }

        }
        .con.verified-style {
            span {
                border-color: #f00;
            }
        }

        .btn {
            padding: 15px 0;
            text-align: right;
            button {
                padding: 2px 15px;
                border: 1px solid #000;
                background-color: transparent;
                cursor: pointer;
                outline: none;
            }

            button:hover {
                background-color: #eee;
            }
        }
    }

    .release-frame::after {
        content: '';
        position: absolute;
        top: -6px; right: 67px;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        background-color: #fff;
        border: 1px solid #000;
        border-right: none;
        border-bottom: none;
    }
</style>
